<template>
    <div>
        <div class="qqqq">
            <div class="credit-list-com flex">
                <div>
                    <div class="content-title">本周热门卡推荐</div>
                    <div class="www flex card-height">
                        <credit-card :creditProData="i" v-for="i in creditCardListData"></credit-card>
                    </div>
                </div>
            </div>
        </div>
        <div class="qqqq">
            <div class="credit-list-com flex">
                <div class="left-contain flex-2">
                    <div class="content-title">选择银行</div>
                    <div class="www height80 flex width85">
                        <select-bank :creditProData="i" v-for="i in creditBankListData"></select-bank>
                    </div>
                </div>
                <div class="flex-1">
                    <notice-list :indexfirstListData="indexfirstListData"></notice-list>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import noticeList from "components/notice-list"
import creditProduct from "components/credit-product"
import creditCard from "components/credit-card"
import creditBank from "components/credit-bank"
import selectBank from "components/select-bank"
import { cardList } from "@/common/js/apply-credit-card/recommend-card"
import { bankList } from "@/common/js/apply-credit-card/bank-list"
import { noticeData } from "@/common/js/apply-credit-card/notice-list"
export default {
  data() {
    return {
      indexfirstListData: [],
      creditProData: {},
      indexListSecData: [],
      creditCardListData: {},
      creditBankListData: {},
      ruleForm2: {}
    }
  },
  components: {
    noticeList,
    creditProduct,
    creditCard,
    creditBank,
    selectBank
  },
  mounted() {
    this.initData(0)
  },
  watch: {
    '$route' (to, from) {
        this.initData(to.query.type)
    }

  },
  methods: {
    initData(t) {
      this.creditCardListData = cardList[t]
      this.creditBankListData = bankList[t]
      this.indexfirstListData = noticeData[t]
    }
  }
}

</script>
<style scoped lang="less">
@import "../../common/less/variable.less";
.qqqq {
    margin-bottom: 30px;
    .content-title {
        height: 40px;
        background: #DCDCDC;
    }
}

.credit-list-com {
    >div {
        &:first-child {
            // width: 70%;
            margin-right: 10px;
            >.www {
                flex-wrap: wrap;
                flex-wrap: wrap;
                align-items: center;
            }
            .card-height {
                height: 60%;
                padding-bottom: 5px;
            }
        }

        &:last-child {}
    }
    .left-contain {
        border: 1px solid #DCDCDC;
    }
    .card-div {
        padding-right: 6%;
        &:last-child {
            padding-right: 0;
        }
    }
}

.banner {
    .width45 {
        width: 45% !important;
    }
    .width55 {
        width: 55% !important;
        .el-carousel__item h3 {
            color: #475669;
            font-size: 18px;
            opacity: 0.75;
            line-height: 300px;
            margin: 0;
        }

        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }
    }
}


.height80 {
  margin: .1rem;
  width: 97%;
  border: 1px solid #DCDCDC;
}

.top-right {
    .top-right-left {
        >div {
            >div {
                >img {
                    width: 50px;
                    height: 50px;
                }
            }
        }
    }
}

.flex-2 {
    width: 60%;
}

.flex-1 {
    width: 40%;
}

.width-card-template, .width-bank-template {
  width: 24.8%;
}

.width-bank-template + .width-bank-template {
  border-right: 1px solid #DCDCDC;
}

.width-bank-template {
  padding-top: .1rem;
  border-bottom: 1px solid #DCDCDC;
}

.width-bank-template:nth-child(4n) {
  border-right: none;
}
.width-bank-template:nth-child(1) {
  border-right: 1px solid #DCDCDC;
}
</style>
